<template>
<main class="homehot">
    <ul class="hotul">
        <li v-for="hotlist in homehotnavdata" :key="hotlist.id" class="hotli">
            <img class="hotimg" :src="hotlist.img" alt="我是图">
            <p class="hotp">{{hotlist.name}}</p>
        </li>
    </ul>
</main>
</template>

<script>

// import axios from "axios";

export default{
    name:'HomeHotNav',
    data:function(){
        return{
            hotlists:[]
        };
    },
    created(){
        // axios({
        //     url:"/HomeHotNav"
        // })
        // .then(res=>{
        //     this.hotlists=res.data
        // })
        // .catch(err=>console.log("err404",err));
    this.$store.dispatch("LINK_HOMEHOTNAV_DATA","/home/homehotnav")

    },
   computed:{
      homehotnavdata(){
        return this.$store.state.HomeHotNavM.homehotnav
      }
      
      // console.log(this.banners)
    }


    }


</script>

<style scoped>
.homehot {
    /* background-color: rgb(243, 195, 255); */
    box-sizing: border-box;
    padding: 1rem .15rem .1rem;
}
.hotul{
    display: flex;
    
}
.hotul .hotli{
    /* background-color: rgb(253, 193, 193); */
    width: 1rem;
    height: 1.1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hotul .hotli .hotimg{
    width: .52rem;
    margin-bottom: .1rem;
    margin-top: .15rem;
}
.hotp{
    color: grey;
}


</style>
